<template>
  <div>
   <!--  <van-nav-bar title="玻璃报修" /> -->
    <van-cell
      class="custom-cell"
      :title="'服务时间：' + timeInfo[0] + '至' + timeInfo[1]"
    />
    <div class="wrap">
      <div class="card" v-for="(item, index) in list" :key="item.id">
        <div class="date">{{ format(item.createTime) }}</div>
        <div class="tip">{{ item.reportInfo }}</div>
        <div class="title">第{{ index + 1 }}次</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// @ts-nocheck
import { ref, reactive, onMounted } from "vue";
import { getPolicyInfo } from "@/apis/index";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
const route = useRoute();
const list = ref([]);
const timeInfo = ref([]);
const format = (time) => {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
};
onMounted(async () => {
  const time = Number(route.query.policyDate)
  timeInfo.value = [
    dayjs(time).format("YYYY/MM/DD"),
    dayjs(time).add(1, "year").format("YYYY/MM/DD"),
  ];
  const res = await getPolicyInfo({ ownerId: route.query.id });
  list.value = res.data;
});
</script>

<style lang="scss" scoped>
.custom-cell {
  margin: 5px 0;
}
.wrap {
  padding: 0 20px;
  box-sizing: border-box;
}
.card {
  position: relative;
  border-radius: 5px;
  background: #fff;
  margin: 5px 0;
  padding: 10px;
  .date {
    font-weight: 400;
    font-size: 12px;
    color: #999999;
  }
  .tip {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #000;
    margin-top: 10px;
  }
  .title {
    position: absolute;
    right: 0;
    top: 0;
    background: #fbb215;
    font-size: 12px;
    padding: 3px 5px;
    color: #fff;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }
}
</style>
